<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Web Application | todo</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="<?php echo base_url(); ?>/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo base_url(); ?>/css/animate.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo base_url(); ?>/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo base_url(); ?>/css/font.css" type="text/css" cache="false" />
  <link rel="stylesheet" href="<?php echo base_url(); ?>/js/fuelux/fuelux.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo base_url(); ?>/js/datatables/datatables.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo base_url(); ?>/css/app.css" type="text/css" />
</head>
<body>
  <section class="panel">
	<div class="table-responsive">
	  <table id="MyStretchGrid" class="table table-striped datagrid m-b-sm">
		<thead>
		  <tr>
			<th>
			  <div class="row">
				<div class="col-sm-4 m-t-xs m-b-xs">
				  <div class="input-group search datagrid-search">
					<input type="text" class="input-sm form-control" placeholder="Cari permohonan">
					<div class="input-group-btn">
					  <button class="btn btn-sm btn-info"><i class="fa fa-search fa-inverse"></i></button>
					</div>
				  </div>
				</div>
				<div class="col-sm-4 m-t-xs m-b-xs">
					<div class="doc-buttons">
						<?php
						if(count($pengajuan) > 0){
						?>
						<a onclick="gagal()"><button class="btn btn-sm btn-info"><i class="fa fa-pencil text"></i>
							<span class="text">Permohonan Legalisir</span></button></a>
						<?php
						} else {
						?>
						<a href="<?php echo site_url('pengajuan/tambahPermohonan2');?>"><button class="btn btn-sm btn-info"><i class="fa fa-pencil text"></i>
							<span class="text">Permohonan Legalisir</span></button></a>
						<?php
						}
						?>
						<a href="<?php echo site_url('pengajuan/updateBio');?>"><button class="btn btn-sm btn-info"><i class="fa fa-edit text"></i>
							<span class="text">Update Biodata</span></button></a>
					</div>
				</div>		
			  </div>
			</th>
		  </tr>
		</thead>
		<tfoot>
		  <tr>
			<th class="row">
			  <div class="datagrid-footer-left col-sm-6 text-center-xs m-l-n" style="display:none;">
				<div class="grid-controls m-t-sm">
				  <span>
					<span>Menampilkan</span>
					<span class="grid-start"></span> -
					<span class="grid-end"></span> dari
					<span class="grid-count"></span>
				  </span>
				  <div class="select grid-pagesize dropup" data-resize="auto">
					<button data-toggle="dropdown" class="btn btn-sm btn-white dropdown-toggle">
					  <span class="dropdown-label"></span>
					  <span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
					  <li data-value="5"><a href="#">5</a></li>
					  <li data-value="10"><a href="#">10</a></li>
					  <li data-value="20" data-selected="true"><a href="#">20</a></li>
					  <li data-value="50"><a href="#">50</a></li>
					  <li data-value="100"><a href="#">100</a></li>
					</ul>
				  </div>
				  <!--<span>Per Page</span>-->
				</div>
			  </div>
			  <div class="datagrid-footer-right col-sm-6 text-right text-center-xs" style="display:none;">
				<div class="grid-pager m-r-n">
				  <button type="button" class="btn btn-sm btn-white grid-prevpage"><i class="fa fa-chevron-left"></i></button>
				  <span>Halaman ke </span>
				  <div class="inline">
					<div class="input-group dropdown combobox">
					  <input class="input-sm form-control" type="text">
					  <div class="input-group-btn dropup">
						<button class="btn btn-sm btn-white" data-toggle="dropdown"><i class="caret"></i></button>
						<ul class="dropdown-menu pull-right"></ul>
					  </div>
					</div>
				  </div>
				  <span>dari <span class="grid-pages"></span></span>
				  <button type="button" class="btn btn-sm btn-white grid-nextpage"><i class="fa fa-chevron-right"></i></button>
				</div>
			  </div>
			</th>
		  </tr>
		</tfoot>
	  </table>
	</div>
  </section>
  <script src="<?php echo base_url(); ?>/js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="<?php echo base_url(); ?>/js/bootstrap.js"></script>
  <!-- App -->
  <script src="<?php echo base_url(); ?>/js/app.js"></script>
  <!-- fuelux -->
  <script src="<?php echo base_url(); ?>/js/fuelux/fuelux.js"></script>
  <script src="<?php echo base_url(); ?>/js/libs/underscore-min.js"></script>
  <!-- datatables -->
  <script src="<?php echo base_url(); ?>/js/datatables/jquery.dataTables.min.js"></script>
</body>
</html>
<script language="javascript">
	function gagal(){
		alert("Berkas legalisir sebelumnya belum selesai diverifikasi atau belum anda ambil. Jika berkas legalisir sebelumnya belum selesai diverifikasi atau diambil, anda tidak bisa melakukan pengajuan legalisir.");
	}
	$(document).ready(function(){
	// fuelux datagrid
		// $('#lihat').onClick(function(){
			// $('#ajaxModal').remove();
				// var $this = $(this)
				  // , $remote = $this.data('remote') || $this.attr('href')
				  // , $modal = $('<div class="modal" id="ajaxModal"><div class="modal-body"></div></div>');
				// $('body').append($modal);
				// $modal.modal();
				// $modal.load($remote);
		// });
	
		var DataGridDataSource = function (options) {
			this._formatter = options.formatter;
			this._columns = options.columns;
			this._delay = options.delay;
		};

		DataGridDataSource.prototype = {

			columns: function () {
				return this._columns;
			},

			data: function (options, callback) {
				var url = '<?php echo site_url("pengajuan/json_pengajuan/1"); ?>';
				var self = this;

				setTimeout(function () {

					var data = $.extend(true, [], self._data);

					$.ajax(url, {
						dataType: 'json',
						async: false,
						type: 'GET'
					}).done(function (response) {

						data = response.geonames;
						// SEARCHING
						if (options.search) {
							data = _.filter(data, function (item) {
								var match = false;

								_.each(item, function (prop) {
									if (_.isString(prop) || _.isFinite(prop)) {
										if (prop.toString().toLowerCase().indexOf(options.search.toLowerCase()) !== -1) match = true;
									}
								});

								return match;
							});
						}


						var count = data.length;

						// SORTING
						if (options.sortProperty) {
							data = _.sortBy(data, options.sortProperty);
							if (options.sortDirection === 'desc') data.reverse();
						}

						// PAGING
						var startIndex = options.pageIndex * options.pageSize;
						var endIndex = startIndex + options.pageSize;
						var end = (endIndex > count) ? count : endIndex;
						var pages = Math.ceil(count / options.pageSize);
						var page = options.pageIndex + 1;
						var start = startIndex + 1;

						data = data.slice(startIndex, endIndex);

						if (self._formatter) self._formatter(data);

						callback({ data: data, start: start, end: end, count: count, pages: pages, page: page });
					}).fail(function(e){

					});
				}, self._delay);
			}
		};

		$('#MyStretchGrid').each(function() {
			$(this).datagrid({
				dataSource: new DataGridDataSource({
					// Column definitions for Datagrid
					columns: [
						{
							property: 'id',
							label: 'No.',
							sortable: true
						},
						{
							property: 'button',
							label: 'Lihat',
							sortable: false
						},
						{
							property: 'TGL_PENGAJUAN',
							label: 'Tanggal Permohonan',
							sortable: true
						},
						{
							property: 'TGL_PENGAMBILAN',
							label: 'Tanggal Pengambilan',
							sortable: true
						},
						{
							property: 'SEKOLAH',
							label: 'Sekolah',
							sortable: false
						},
						{
							property: 'STATUS',
							label: 'Status',
							sortable: false
						}
					],

					// Create IMG tag for each returned image
					formatter: function (items) {
					  $.each(items, function (index, item) {
						item.geonameId = '<a href="#edit?geonameid='+item.geonameId+'"><i class="icon-pencil"></i></a>';
					  });
					}
			  })
			});
		});
	});
	function popup(){
		$('#ajaxModal').remove();
		var $this = $(this)
		  , $remote = $this.data('remote') || $this.attr('href')
		  , $modal = $('<div class="modal" id="ajaxModal"><div class="modal-body"></div></div>');
		$('body').append($modal);
		$modal.modal();
		$modal.load($remote);
	}
</script>